<template>
  <el-time-select
    v-model="currentValue"
    :picker-options="pickerOptions"
    :placeholder="placeholder"
    :readonly="readonly"
    :disabled="disabled"
    :editable="editable"
    :clearable="clearable"
    :size="size"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    :arrow-control="arrowControl"
    :align="align"
    :popper-class="popperClass"
    :range-separator="rangeSeparator"
    :value-format="valueFormat"
    :default-value="defaultValue"
    :name="name"
    :prefix-icon="prefixIcon"
    :clear-icon="clearIcon"
    v-bind="$attrs"
    @update:modelValue="handleInputEvent"
  />
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from "vue";

interface PickerOptions {
  start?: string;
  end?: string;
  step?: string;
  minTime?: string;
  maxTime?: string;
  format?: string;
  [key: string]: any;
}

export default defineComponent({
  name: "TimePicker",
  inheritAttrs: false,
  props: {
    modelValue: {
      type: [String, Date] as PropType<string | Date>,
      default: "",
    },
    pickerOptions: {
      type: Object as PropType<PickerOptions>,
      default: () => ({}),
    },
    placeholder: {
      type: String,
      default: "选择时间",
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    editable: {
      type: Boolean,
      default: true,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String as PropType<"large" | "default" | "small">,
      default: "default",
    },
    startPlaceholder: {
      type: String,
      default: "",
    },
    endPlaceholder: {
      type: String,
      default: "",
    },
    arrowControl: {
      type: Boolean,
      default: false,
    },
    align: {
      type: String as PropType<"left" | "center" | "right">,
      default: "left",
    },
    popperClass: {
      type: String,
      default: "",
    },
    rangeSeparator: {
      type: String,
      default: "-",
    },
    valueFormat: {
      type: String,
      default: "",
    },
    defaultValue: {
      type: [String, Date] as PropType<string | Date>,
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
    prefixIcon: {
      type: String,
      default: "",
    },
    clearIcon: {
      type: String,
      default: "",
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const currentValue = ref<string | undefined>(
      props.modelValue instanceof Date
        ? props.modelValue.toISOString()
        : props.modelValue || undefined
    );

    watch(
      () => props.modelValue,
      (val) => {
        currentValue.value = val instanceof Date ? val.toISOString() : val || undefined;
      }
    );

    const handleInputEvent = (value: string | Date) => {
      const formattedValue =
        value instanceof Date && props.valueFormat ? value.toISOString() : value;
      emit("update:modelValue", formattedValue);
    };

    return {
      currentValue,
      handleInputEvent,
    };
  },
});
</script>

<style lang="scss" scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
